import React from 'react'
import styles from './Home.module.css'
import { Row, Col, Typography } from "antd"
import { Header, Footer, SideMenu, Carousel, ProduceList, BusinessParters } from '../../components'
import { productList1, productList2, productList3 } from './mockup'
import sideImg01 from '../../assets/images/sider_2019_02-04.png'
import sideImg02 from '../../assets/images/sider_2019_02-04-2.png'
import sideImg03 from '../../assets/images/sider_2019_12-09.png'
// withTranslation是高阶函数，WithTranslation是propsTypes
import { withTranslation, WithTranslation } from "react-i18next";

class HomePageComponent extends React.Component<WithTranslation>{
  render() {
    // const { t } = this.props
    const { t } = this.props;
    return <>
      <Header />
      <div className={styles["page-content"]}>
        <Row>
          <Col span={6}><SideMenu /></Col>
          <Col span={18}><Carousel /></Col>
        </Row>
      </div>
      <ProduceList title={<Typography.Title level={3} type="danger">{t('home_page.hot_recommended')}</Typography.Title>} sideImg={sideImg01} produce={productList1} />
      <ProduceList title={<Typography.Title level={3} type="danger">{t('home_page.new_arrival')}</Typography.Title>} sideImg={sideImg02} produce={productList2} />
      <ProduceList title={<Typography.Title level={3} type="danger">{t('home_page.domestic_travel')}</Typography.Title>} sideImg={sideImg03} produce={productList3} />
      <BusinessParters />
      <Footer />
    </>
  }
}
export const HomePage = withTranslation()(HomePageComponent)